<template>
  <div class="bgwhite recipe-container">
    <swipe class="slide-swipe" :auto="0">
      <swipe-item class="slide" v-for="v in recipeList" :key="v.recipeId">
        <div class="slide-wrap">
          <div class="header">
            <div class="barcode">
              <barcode
                :value="v.chargeSerial"
                style="width:100px;height:50px;"
                :options="{ displayValue: true }"
              ></barcode>
            </div>
            <div class="title">
              创业智慧互联网医院
              <p>处方笺</p>
            </div>
            <div class="right-sign">普通药品处方</div>
          </div>

          <div class="content pd10" style="min-height:350px;">
            <ul class="text-list">
              <li class="col-2">
                姓名
                <span class="unline">{{v.patientName}}</span>
              </li>
              <li class="col-2">
                &nbsp;性别
                <span class="unline">{{v.gender | getSex}}</span>
              </li>
              <li class="col-2">
                年龄
                <span class="unline">{{v.age}}岁</span>
              </li>
              <li class="col-3">
                日期
                <span class="unline">{{v.recipeDate | format}}</span>
              </li>
            </ul>
            <ul class="text-list">
              <li class="col-3">
                门诊号码
                <span class="unline">{{v.chargeSerial}}</span>
              </li>
              <li class="col-3">
                &nbsp;科室
                <span class="unline">{{v.departmentName}}</span>
              </li>
              <li class="col-2">
                性质
                <span class="unline">{{v.patientNature}}</span>
              </li>
            </ul>
            <ul class="text-list">
              <li class="col-3">
                身份证号
                <span class="unline">{{v.idCard}}</span>
              </li>
              <li class="col-2">
                &nbsp;手机号
                <span class="unline">{{v.mobile}}</span>
              </li>
            </ul>
            <ul class="text-list">
              <li class="col-1">
                临床诊断
                <span class="unline">{{v.diagnosticResults || "暂无"}}</span>
              </li>
              <li class="col-1">
                &nbsp;单位或地址
                <span class="unline">{{v.address}}</span>
              </li>
            </ul>

            <div class="rp">
              <div class="rp-title f20">
                Rp
                <span class="fr pl10" v-if="v.recipeType == 3">{{v.prescriptionNumber}}</span>
              </div>
              <ul class="rp-list" v-if="v.recipeType < 3">
                <li v-for="(item, i) in v.drugItems" :key="i">
                  <div class="text-list flex flex_between flex_vcenter">
                    <div>
                      <div>
                        {{item.drugName}}
                        <span class="fl10">{{item.specification}}</span>
                      </div>
                      <div class="t8">
                        用法：{{item.dose + item.doseUnit}}/次
                        <span class="pl10">{{item.daytimes}}次/日</span>
                        <span class="pl10">{{item.usage}}</span>
                      </div>
                    </div>
                    <div>{{item.quantity + item.unit}}</div>
                  </div>
                </li>
              </ul>
              <div class="rp-list" v-else-if="v.recipeType == 3">
                <div class="text-list flex flex_vcenter wrap">
                  <div class="half-width" v-for="(item, i) in v.drugItems" :key="i">
                    {{item.drugName}}
                    <span class="fl10">{{item.quantity}}{{item.unit}}</span>
                    <span class="fl10" v-if="item.usage">({{item.usage}})</span>
                  </div>
                </div>
                <div class="t8">
                  用法：{{v.herbalMedicine}}
                  <span
                    class="pl10"
                    v-if="v.frequencyName"
                  >{{v.frequencyName}}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="clearfix pd10">
            <div class="sign-name fl">
              <p>
                处方医师：
                <img :src="v.doctorPicUrl" height="20" class="v-middle" />
              </p>
              <p>
                审核医师：
                <img :src="v.auditPhysiciansPicUrl" height="20" class="v-middle" />
              </p>
              <p>
                审核药师：
                <img :src="v.auditorsCodePicUrl" height="20" class="v-middle" />
              </p>
            </div>
            <div class="gaizhang fr" :style="`background-image: url(${v.orgSealPicUrl})`">盖章：</div>
          </div>

          <div class="page-footer text-center t3 f12">*药师温馨提示：请遵医嘱服药！处方当日有效！</div>
        </div>
      </swipe-item>
    </swipe>
  </div>
</template>

<script>
import barcode from "@xkeshi/vue-barcode";
import "vue-swipe/dist/vue-swipe.css";
import { Swipe, SwipeItem } from "vue-swipe";
import { commonAjax, commonAjaxJson, RESTFUL_API } from "@/api/api";
export default {
  components: { barcode, Swipe, SwipeItem },
  props: {
    visitNo: {
      type: String
    },
    hospitalCode: {
      type: String
    },
    recipeId: {
      type: String,
      default: ""
    },
    outpatientType: {
      default: ""
    }
  },
  data() {
    return {
      recipeList: []
    };
  },
  mounted() {
    this.getRecipeDetail2();
  },
  methods: {
    getRecipeDetail2() {
      const { hospitalCode, visitNo, recipeId, outpatientType } = this;
      let params = {
        //todo
        hospitalCode,
        visitNo,
        recipeId,
        outpatientType
      };
      commonAjaxJson(RESTFUL_API.getRecipeDetail2, params, true).then(res => {
        if (res.data.code == 200) {
          this.recipeList = res.data.data;
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
@import "../common/css/vars.less";
@import "../common/css/flex.css";
.mr20 {
  margin-right: 20px;
}
.half-width {
  min-width: 50%;
}
.recipe-container {
  height: 100%;
  .slide {
    overflow-y: scroll;
  }
  .header {
    position: relative;
    .title {
      text-align: center;
      margin: 10px 0;
      font-size: 1.3em;
    }
    .barcode {
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .right-sign {
      width: 60px;
      border: 1px solid #333;
      padding: 0px 6px;
      position: absolute;
      top: 10px;
      right: 20px;
      box-shadow: 2px 2px 8px #ddd;
    }
  }
  .text-list {
    display: flex;
    margin-top: 10px;
    li {
      flex: 1;
      &.col-1 {
        flex: 1;
      }
      &.col-2 {
        flex: 2;
      }
      &.col-3 {
        flex: 3;
      }

      .unline {
        text-decoration: underline;
      }
    }
  }
  .rp {
    padding: 10px;
    border-top: 2px solid #000;
    margin-top: 10px;
  }
  .gaizhang {
    background: url(http://wxtest01.atag.bsoft.com.cn/image166/upload/image/1.jpg)
      no-repeat;
    width: 100px;
    height: 80px;
    text-align: center;
    background-size: 70px;
  }
  // .sign-name {
  // }
  .page-footer {
    width: 100%;
  }
}
</style>